<template>
  <div>
    <h1>P144 - reactive函数</h1>
    <div>一个人的姓名:{{ name }}</div>
    <div>一个人的年龄:{{ age }}</div>
    <div>
      一个人的工作:
      <!-- 模板语法中进行读取对象类数据依然不需要.value，直接写即可 -->
      <div>工作内容:{{ job.type }}</div>
      <div>工作薪水:{{ job.salary }}</div>
    </div>
    <div>
      这个人的爱好:
      <span v-for="item in arr" :key="item">{{ `${item}  ` }}</span>
    </div>
    <button @click="change">修改信息</button>
    <hr />
  </div>
</template> 
    
    <script>
import { reactive, ref } from "vue";
export default {
  name: "App",
  setup() {
    let name = ref("hzj");
    let age = ref(18);
    // 上一节我们涉及到的都是简单的数据类型，本小节看下引用数据类型，比如对象.
    let job = reactive({
      type: "前端工程师",
      salary: "18k",
    });

    // 另外，还记得我们说过vue2中不允许直接通过数组的下标进行数组修改，因为触发不了数据劫持吗？现在reactive解决了这个问题
    let arr = reactive(["抽烟", "喝酒", "烫头"]);

    function change() {
      name.value = "ljj";
      age.value = 40;

      // 上节课是不是觉着读取对象类数据还要.value一下很麻烦？放心用reactive函数就不会有这种烦恼了，直接这样写即可。不过不要想太多，基本数据类型不要用reactive，还是要用ref，所以基本数据类型还是老老实实的.value去吧
      job.type = "UI设计师";
      job.salary = "100k";

      //reactive函数创建出来的数组是可以通过下标直接修改的
      arr[0] = '学习';
    }

    return {
      name,
      age,
      job,
      arr,
      change,
    };
  },
};
</script>
    
    <style>
</style>
    